import React, { useState } from "react";
import { Outlet, useSearchParams } from "react-router-dom";
import { Layout, theme } from "antd";
const { Content } = Layout;
import SiderComp from "./layout/Sider";
import HeaderComp from "./layout/Header";
import AuthRouter from "./../../router/AuthRouter";

const Main = () => {
  const [sup] = useSearchParams();
  const outside = sup.get("outside");
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  /* 页面被第三方系统嵌入，自己展示页面内容模式  */
  if (outside === "platform") {
    return (
      <AuthRouter>
        <div style={{ height: "100vh" }}>
          <Outlet />
        </div>
      </AuthRouter>
    );
  }

  /* 系统访问模式 */
  return (
    // 路由渲染完毕，每次浏览器输入地址，在main里面，采用高阶组件AuthRouter 做登录校验
    <AuthRouter>
      <Layout style={{ height: "100vh" }}>
        <SiderComp />
        <Layout>
          <HeaderComp />
          <Content
            style={{
              margin: "10px",
              padding: 24,
              minHeight: 280,
              background: colorBgContainer,
              borderRadius: borderRadiusLG,
            }}
          >
            <Outlet />
          </Content>
        </Layout>
      </Layout>
    </AuthRouter>
  );
};

export default Main;
